<template>
  <el-row class="tac">
    <div class="gobackContent">
      <div class="goBack" @click="goBack">
        <i class="el-icon-arrow-left"></i> {{$t("home.backAuthorCenter")}}
      </div>
    </div>
    <div class="title">{{ book.name }}</div>
    <div class="newChapter">
      <button @click="toWrite">{{$t("home.newChapter")}}</button>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      active-text-color="#21D4CF"
      @open="openMenu"
      :default-openeds="opends"
      :default-active="nowId"
    >
      <el-submenu index="1">
        <template slot="title">
          <!-- <i class="iconfont iconcaogaoxiang-"></i> -->
          <img style="margin-right:5px" src="../../assets/caogaoxiang.png" alt="">
          <span>{{$t("home.draftBoxTotal")}}</span>
          <!-- ({{$t("home.common")}}{{ draft.length }}{{$t("home.chapters")}}) -->
          <span class="fontStyle">（Total {{ draft.length }} chapters）</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            class="draftList"
            v-for="(item, index) in draft"
            :key="index"
            @click="evenClick(item)"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.title"
              placement="top-start"
            >
              <div class="articleTitle">{{ item.title }}</div>
            </el-tooltip>

            <div>
              <span>{{ item.wordsCount }}{{$t("home.words")}}</span>
              <span>{{ item.editTime }}</span>
            </div>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <!-- <i class="iconfont iconzhifeiji"></i> -->
          <img style="margin-right:5px" src="../../assets/daohang_2.png" alt="">
          <span>{{$t("home.issued")}}</span>
          <!-- ({{$t("home.common")}}{{ pubList.length }}{{$t("home.chapters")}}) -->
          <span class="fontStyle">（Total {{ pubList.length }} chapters）</span>
        </template>
        <el-menu-item
          v-for="(item, index) in pubList"
          @click="setChapter(item)"
          :key="index"
        >
          <div class="titleChap">
            <div v-if="item.state!=2" :class="'status'+ item.state">{{ item.state | statusFilter }}</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.title"
                placement="top-start"
              >
                <div class="articleTitle">{{ item.title }}</div>
              </el-tooltip>
              <div class="smallTile">
                <span v-if="!item.isFree" style="color: red">{{$t("home.pay")}}</span>
                <span v-else style="color: green">{{$t("home.free")}}</span>
                <span style="margin:0 5px">|</span>
                <span>{{ item.wordsCount }}{{$t("home.words")}}</span>
                <span class="editTime">{{ri}}-{{yue}}-{{nina}} {{si}}:{{fen}}</span>
              </div>
            </div>
          </div>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <el-dialog :title="$t('home.warmPrompt')" :visible.sync="leaveSaveVisible">
      <div>{{$t("home.leavePageNotSave")}}</div>
      <span slot="footer">
        <el-button @click="subSave">{{$t("home.meThink")}}</el-button>
        <el-button type="primary" @click="cancelLeave">{{$t("home.whateverBye")}}</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
let that
import {
  selectDraftChapterList,
  selectChapterDraft,
  selectChapterCheckList,
  selectChapterCheck,
} from "@/api/authorCenter/createBook";
export default {
  name: "",
  props: ["book", "editer", "textId"],
  data() {
    return {
      // book: {
      // 	name: '凡人修仙传'
      // },
      opends: ["1", "2"],
      otherName: "",
      nowId: this.$route.query.contenId, //最新已发章节ID
      leaveSaveVisible: false, //离开编辑提示
      sessGetData: {},
      draft: [], //草稿箱
      pubList: {}, //已发布'
      article: "",
      ri:"",
      yue:"",
      nina:"",
      si:"",
      fen:"",
    };
  },
  watch: {
    nowId() {
      return this.$route.query.contenId;
    },
  },
  filters: {
    statusFilter: function (value) {
      switch (value) {
        case 0:
          return that.$t('home.draft');
        case 1:
          return that.$t('home.underReview');
        // case 2:
        //   return "";
        case 3:
          return that.$t('home.fail');
      }
    },
  },
  beforeCreate() {
    that = this;
  },
  methods: {
    openMenu(index) {},
    goBack() {
      //跳转道作者中心
      this.$router.push("/author/center");
    },
    leaveSave() {
      //打开是否保存离开层
      this.leaveSaveVisible = true;
    },
    cancelLeave() {
      //无所谓再见
      console.log(this.otherName);
      if (!this.otherName) {
        //判断 走 草稿详情，还是发布详情
        this.leaveSaveVisible = false;
        this.getDraftDetail();
        sessionStorage.removeItem("modify");
      } else {
        this.leaveSaveVisible = false;
        this.getSelectChapterCheck();
        sessionStorage.removeItem("modify");
      }
    },
    subSave() {
      //我在看看
      this.leaveSaveVisible = false;
    },
    // 展开指定列表
    handleOpen(key, keyPath) {},
    // 收起指定列表
    handleClose(key, keyPath) {},
    // 去写作--新建章节
    toWrite() {
      let data = {
        bookId: "",
        content: "",
        // checkContentId: true,
        contentType: 0,
        id: "",
        title: "",
        wordsCount: "",
      };
      sessionStorage.setItem("modify", "true");
      this.editer.end();
      this.$emit("getDetail", [data, false, "", "1"]);
    },

    evenClick(item) {
      this.article = item;
      this.otherName = 0;
      if (sessionStorage.getItem("modify") == "true") {
        this.leaveSaveVisible = true;
      } else {
        this.getDraftDetail();
      }
    },

    // 获取草稿章节详情
    getDraftDetail() {
      // this.$emit("leaveSave")
      let item = this.article;
      let params = { draftId: item.id, bookId: this.sessGetData.bookId };
      this.editer.start(); //默认编辑器为浏览不可编辑
      selectChapterDraft(params).then((res) => {
        // let sess = { content: res.source.content, title: res.source.title };
        // sessionStorage.setItem("textContent", JSON.stringify(sess)); //草稿数据到sessinon
        this.$emit("getDetail", [res.source, true, "", "0"]); //传值给编辑器
      });
    },
    // 已发布文章详情
    getSelectChapterCheck(state) {
      this.editer.start();
      let params = {
        checkBookId: this.sessGetData.bookId,
        checkContentId: this.textContent.id,
      };
      selectChapterCheck(params).then((res) => {
        this.$emit("getDetail", [res.source, true, state, "1"]);
      });
    },
    setChapter(item) {
      this.textContent = item;
      this.otherName = 1;
      if (sessionStorage.getItem("modify") == "true") {
        this.leaveSaveVisible = true;
      } else {
        this.getSelectChapterCheck(item.state);
      }
    },
    getDraftList() {
      //获取草稿像列表
      let params = { bookId: this.sessGetData.bookId, draftId: "" };
      selectDraftChapterList(params).then((res) => {
        this.draft = res.source;
      });
    },
    //获取已发布章节
    getChapterList() {
      let params = { checkBookId: this.sessGetData.bookId };
      selectChapterCheckList(params).then((res) => {
        this.pubList = res.source;
        console.log(this.pubList,11)
        res.source.forEach((item)=>{
           this.ri=item.editTime.slice(8,10)
           this.yue=item.editTime.slice(5,7)
           this.nina=item.editTime.slice(0,4)
           this.si=item.editTime.slice(11,13)
           this.fen=item.editTime.slice(14,16)
      })

      });
    },
  },

  created() {
    this.sessGetData = JSON.parse(sessionStorage.getItem("writeArticle"));
    this.getDraftList();
    this.getChapterList();
  },
  mounted() {
    // this.nowId = this.$route.query.contenId;
    // 请求发布文章详情
    let params = {
      checkBookId: this.sessGetData.bookId,
      checkContentId: this.$route.query.contenId,
    };
    selectChapterCheck(params).then((res) => {
      if (res.code == "100011") {
        //新书没有章节
        let chapterMess = {
          checkBookId: "",
          title: "",
          // checkContentId: true,
          content: "",
          contentType: 0,
          wordsCount: "",
        };
        this.$emit("getDetail", [chapterMess, false]);
      } else {
        this.$emit("getDetail", [res.source, true, this.$route.query.state]);
      }
    });
  },
};
</script>

<style scoped="scoped" lang="scss">
::v-deep .el-menu{
  border:none;
}
::v-deep .el-submenu  {
  position: relative;
}
::v-deep .el-menu-item{
  // padding-left: 55px !important;
  margin:10px 0;
}
::v-deep .el-submenu__title{
  font-size: 16px;
  color:#000;
}
.fontStyle{
  color:#999;
  margin-left: 10px;
}
.editTime {
  margin-left: 10px;
  margin-bottom: 10px;
}
.gobackContent{
  display: flex;
  justify-content: center;
  margin:25px 0;
}
.goBack {
  cursor: pointer;
 box-sizing: border-box;
  border-radius: 6px;
  width: 150px;
  height: 40px;
  font-size: 18px;
  border: 1px solid #000;
  line-height:38px;
  text-align: center;
}
.articleTitle {
  font-size: 16px;
  color:#000;
  margin-bottom: 3px;
  width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status {
  // position: absolute;
  left: -20px;
  z-index: 100;
  line-height: 35px;
  width: 80px;
}
.status1{
  position:absolute;
  top:-14px;
  left: 5px;
  background-color: #feeccd;
  font-size: 20px;
  height: 24px;
  line-height: 24px;
  color:#FBA002;
  padding:8px 18px 8px 18px;
  border-radius: 6px;
  transform: scale(.5);
}
.status3{
  position:absolute;
  top:-14px;
  left: 0px;
  background-color: rgba(241, 64, 60, 0.1);
  font-size: 20px;
  height: 24px;
  line-height: 24px;
  border-radius: 5px;
  color:#F1403C;
  padding:0 10px;
  padding:8px 18px 8px 18px;
  transform: scale(.5);
}
.titleChap {
  height: 30px;
  line-height: 20px;
  margin-bottom: 15px;
  display: flex;
  border-bottom:1px solid #eee;
  padding:15px 0;
}
.smallTile {
  font-size: 14px;
  color:#999;
}
.draftList {
  .articleTitle {
    width: 200px;
    margin-bottom:4px
  }
  div {
    line-height: 25px;
    font-size: 14px;
    span {
      font-size: 12px;
      color: #ccc;
      margin-right: 15px;
    }
  }
}
.item_feng::before {
  content: "封禁";
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff0f49;
  line-height: 11px;
  padding: 2px 5px;
  background: #fff1f4;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
.item_wei::before {
  content: "未通过";
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fea06b;
  line-height: 11px;
  padding: 2px 5px;
  background: #fef5f0;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
.item_shen::before {
  content: "审核中";
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #c27ff9;
  line-height: 11px;
  padding: 2px 5px;
  background: #f2e8fa;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
.item_dai::before {
  content: "待审核";
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 11px;
  padding: 2px 5px;
  background: #cccccc;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
.item_shi::before {
  content: "实时发布";
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #21d4cf;
  line-height: 11px;
  padding: 2px 5px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
.tac {
  .title {
    box-sizing: border-box;
    width: 258px;
    margin:20px;
    font-size: 18px;
    padding-bottom: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    line-height: 25px;
    border-bottom: 1px solid #eee;
  }

  .newChapter {
    padding: 10px;
    text-align: center;

    button {
      width: 100%;
      height: 40px;
      padding: 4px 15px;
      line-height: 23px;
      border-radius: 4px;
      border: 1px solid #E86472;
      background: #fceff0 ;
      color:#E86472
    }
  }
}
</style>
